<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '账号设置',
  },
}
</route>
<template>
  <view class="setting-container">
    <view class="menu-list">
      <view class="bg-slate-100 px-4 pt-3">
        <view class="list-container">
          <view v-for="item in menuList" :key="item.path" class="mb-3">
            <view
              class="flex bg-white items-center justify-between p-3 mb-2"
              @click="goDetailPage(item.path)"
            >
              <view class="flex-1 text-4 text-dark flex">
                <view
                  class="iconfont mx-4 flex justify-center items-center"
                  :class="item.icon"
                  :style="{ color: item.color, fontSize: '26px' }"
                ></view>
                <view class="zh-tb-text">
                  <text class="text-center text-#000 font-semibold text-4">{{ item.title }}</text>
                  <text class="text-center">{{ item.tibetanTitle }}</text>
                </view>
              </view>

              <text class="i-carbon-chevron-right"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="cu-list menu">
            <view class="cu-item item-box">
                <view class="content text-center" @click="handleLogout">
                    <text class="text-black">退出登录</text>
                </view>
            </view>
        </view> -->
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { useStore } from 'vuex'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'

// 获取系统信息
const windowHeight = ref(uni.getSystemInfoSync().windowHeight)
const store = useUserStore()
const router = useRouter()
const maskPhone = (phone: string) => {
  if (!phone) return ''
  return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
}
const menuList = [
  {
    title: '修改密码',
    tibetanTitle: 'བོད་ཀྱི་སྐདབོད་ཀྱི་སྐདབོད་ཀྱི་སྐད',
    path: 'pages/mine/password/index',
    icon: 'icon-mima2',
    color: '#087bd5',
  },
  {
    title: '更换手机号',
    tibetanTitle: 'བོད་ཀྱི་སྐདབོད་ཀྱི་སྐདབོད་ཀྱི་སྐད',
    path: 'pages/mine/phone/index',
    icon: 'icon-shoujihao',
    color: '#52db77',
  },
  {
    title: '修改用户信息',
    tibetanTitle: 'བོད་ཀྱི་སྐདབོད་ཀྱི་སྐདབོད་ཀྱི་སྐད',
    path: 'pages/mine/info/index',
    icon: 'icon-yonghuming',
    color: '#ffcf48',
  },
]

const goDetailPage = (path: string) => {
  const url = `/${path}`
  uni.navigateTo({
    url,
  })
}
// 跳转修改密码
const handleToPwd = () => {
  uni.navigateTo({
    url: '/pages/mine/pwd/index',
  })
}
const handleToPhone = () => {
  uni.navigateTo({
    url: '/pages/mine/phone/index',
  })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定注销并退出系统吗？',
    success: (res) => {
      if (res.confirm) {
        store.logout().then(() => {
          uni.reLaunch({
            url: '/pages/login/index',
          })
        })
      }
    },
  })
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f8f8f8;
}

.setting-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

// .item-box {
//     background-color: #FFFFFF;
//     margin: 30rpx;
//     display: flex;
//     flex-direction: row;
//     justify-content: center;
//     align-items: center;
//     padding: 10rpx;
//     border-radius: 8rpx;
//     color: #303133;
//     font-size: 32rpx;
// }
</style>
